<!-- 商品讲解 -->
<template>
	<view>
		<!-- @leftClick="$tools.switchTab('index/index')" -->
		<u-navbar title="商品讲解" bgColor="transparent" leftIconColor="#fff" :titleStyle="{'color':'#fff'}" placeholder
			autoBack>
			<view class="u-nav-slot" slot="right">
				<u-icon v-if="!id" name="plus-circle" label="新增商品讲解" labelColor="#fff" color="#fff" labelPos="left"
					labelSize="14" size="18" @click="show = true"></u-icon>
				<u-icon v-else name="checkmark-circle" label="添加商品讲解" labelColor="#fff" color="#fff" labelPos="left"
					labelSize="14" size="18" @click="$tools.navTo('audio/chooseInteraction?id='+id)"></u-icon>
			</view>
		</u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<view class="listBox" v-if="livelist.length>0">
				<view class="pd30 item" v-for="(i,idx) in livelist" @click="handel(i,idx)">
					<view class="dfx box">
						<view class="icon1">
							<!-- <image src="../../static/img/audio.png" mode=""></image> -->
						</view>
						<view class="info">
							<view class="title">
								{{i.name}}
							</view>
							<view class="num df jb fs26">
								<text>讲解音频：{{i.audio_urls.length}} 条</text>
								<text>直播互动：{{i.interact_ids.length}} 条</text>
							</view>
						</view>
						<view class="edit" @click.stop="handelClick(i)">
							<!-- 查看  -->
							<u-icon name="more-dot-fill" size="18"></u-icon>
						</view>
					</view>
					<view class="aList" v-if="activeId == i.id">
						<view class="item item1 dfx " v-for="(j,index) in i.audio_urls">
							<view class="icon">
								<view v-show="isPlay!=j.id" @click.stop="play(j)">
									<u-icon name="play-right" color="#fff" size="25"></u-icon>
								</view>
								<view v-show="isPlay==j.id" @click.stop="play()">
									<u-icon name="pause" color="#fff" size="25"></u-icon>
								</view>
							</view>
							<view class="info">
								<view class="title cfff">
									{{j.name}}
								</view>
							</view>
							<view class="" @click.stop="delAudio(j)">
								<u-icon name="trash" color="#fff" size="28"></u-icon>
							</view>
						</view>
					</view>
					<view class="text-center mt20" v-show="activeId == i.id" @click.stop="choose(i)">
						选择音频话术添加
					</view>
				</view>
			</view>
			<!-- 内容为空 -->
			<u-empty iconColor="#ffffff" textColor="#ffffff" marginTop="60" text="暂无商品讲解" v-else mode="search"></u-empty>
		</scroll-view>
		<u-modal :show="show" title="新增商品讲解" @confirm="confirm" @cancel="close" ref="uModal" asyncClose showCancelButton>
			<view class="slot-content" style="width: 100%;">
				<u--form labelPosition="left" :model="formData" labelWidth="100" :rules="rules" ref="uForm">
					<u-form-item label="商品讲解名称:" prop="name" ref="item1">
						<u--input v-model="formData.name" placeholder="请输入商品讲解名称" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>

		<u-modal :show="showset" title="配置直播商品" @confirm="confirmSet" @cancel="code='',showset=false" ref="uModal"
			asyncClose showCancelButton>
			<view class="slot-content" style="width: 100%;">
				<u--form labelPosition="left" labelWidth="100">
					<u-form-item label="直播商品序号:">
						<u--input v-model="code" placeholder="请输入直播商品排序号" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				showset: false,
				show: false,
				isPlay: -1,
				title: '',
				code: '',
				livelist: [],
				formData: {
					name: '',
					keyword: '',
					oratory: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入商品讲解名称',
						trigger: ['blur', 'change']
					},
				},
				activeId: '',
				editId: '',
				editName: '',
				id: '',
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.id = e.id
				this.getData()
			}
			this.$tools.loadbgaudio()
		},
		onShow() {
			this.getData()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.formInline.total > this.livelist.length) {
				this.formInline.page++
				this.getData();
			}
		},
		onHide() {
			if (this.activeId) {
				this.$tools.clearAudio()
			}
		},
		onUnload() {
			if (this.activeId) {
				this.$tools.clearAudio()
			}
		},
		methods: {
			ReachBottom() {
				console.log(111);
				if (this.formInline.total > this.livelist.length) {
					this.formInline.page++
					this.getData();
				}
			},
			getData() {
				let params = {
					...this.formInline
				}
				if (this.id) params.scheme_id = this.id
				console.log(params);
				this.$api.explainList(params).then(res => {
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count
						console.log(this.livelist);
						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					this.show = false
					let params = {
						...this.formData
					}
					this.$api.addExplain(params).then(res => {
						this.$tools.toast(res.msg);
						if (res.code == 200) {
							this.close()
							this.formInline = {
								page: 1,
								limit: 10,
								total: 0
							}
							this.getData()
						}
					})
				})
			},
			confirmSet() {
				console.log(111);
				let params = {
					index: this.code,
					id: this.editId,
					name: this.editName
				}
				this.$api.editExplain(params).then(res => {
					this.$tools.toast(res.msg);
					if (res.code == 200) {
						this.editId = ''
						this.showset = false
						this.getData()
					}
				})
			},
			choose(i) {
				this.$tools.navTo(`audioLibrary/chooseSort?id=${i.id}&type=explain`)
			},
			handel(j) {
				console.log(j);
				if (this.isPlay) {
					this.isPlay = -1
					this.$tools.clearAudio()
				}
				if (this.activeId) {
					if (this.activeId == j.id) {
						this.activeId = ''
						return
					} else {
						this.activeId = ''
					}
				}
				this.livelist.map((i, index) => {
					if (j.id == i.id) {
						this.activeId = i.id
					}
				})
				this.$forceUpdate()

			},
			handelClick(i) {
				let arr = ['配置直播互动', '配置直播商品排序号', '删除该商品讲解']
				if (i.index) {
					arr[1] = '移除直播商品排序号'
				} else {
					arr[1] = '配置直播商品排序号'
				}
				uni.showActionSheet({
					itemList: arr,
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						switch (res.tapIndex) {
							case 0:
								this.$tools.navTo(`audio/interaction?id=${i.id}`)
								break;
							case 1:
								this.editId = i.id
								this.editName = i.name
								this.code = ''
								if (i.index) {
									this.confirmSet()
								} else {
									this.showset = true
								}
								break;
							default:
								this.delItem(i)
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg);
					}
				});
			},
			play(j) {
				if (j) {
					this.isPlay = j.id
					this.$tools.setA(j.url)
				} else {
					this.$tools.setA()
					this.$nextTick(() => {
						this.isPlay = -1
					})
				}
			},
			delItem(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: (r) => {
						if (r.confirm) {
							let params = {
								id: i.id
							}
							this.$api.delExplain(params).then(res => {
								this.$tools.toast(res.msg);
								if (res.code == 200) {
									this.livelist = []
									this.formInline = {
										page: 1,
										limit: 10,
										total: 0
									}
									this.getData()
								}
							})
						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delAudio(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: r => {
						if (r.confirm) {
							let params = {
								audio_id: i.id,
								explain_id: this.activeId
							}
							this.$api.delExplainAudio(params).then(res => {
								this.$tools.toast(res.msg);
								if (res.code == 200) {
									this.formInline = {
										page: 1,
										limit: 10,
										total: 0
									}
									this.getData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			close() {
				this.formData = {
					name: '',
					keyword: '',
					oratory: '',
				}
				this.show = false
			},
		}
	}
</script>
<style lang="less">
	.listBox {
		margin: 30rpx;
		font-size: 15px;

		.aList {
			max-height: 30vh;
			overflow: scroll;
		}

		.item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.box {
				justify-content: space-between;
				align-items: center;
			}

			.icon1 {
				width: 60rpx;
				height: 60rpx;
				border-radius: 8px;
				line-height: 60rpx;
				text-align: center;
				font-family: fantasy;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 70%;

				.num {
					font-weight: 500;
				}
			}

			.edit {
				transform: rotate(90deg);
			}

			.item1 {
				background: #6a8bff;
				padding: 20rpx;
				margin-top: 35rpx;
			}


		}
		// .item:last-child{
		// 	margin-bottom: 0;
		// }


	}
</style>